<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html">

    <!-- The boxes for trading and accepting/declining shift trades are not visible at first -->
    <body onload="document.getElementById('tradeBox').style.display='none';document.getElementById('acceptBox').style.display='none'">

        <!-- This page uses the template usersTemplate -->
        <ui:composition template="./usersTemplate.xhtml">

            <!-- Title of this webpage -->
            <ui:define name="title">
                Antons Skafferi
            </ui:define>

            <!-- Content of this webpage -->
            <ui:define name="page">

                <!-- Script for displaying the boxes for trading and accepting/declining shift trades -->
                <!-- Takes one parameter, color, from the div that calls this function-->
                <script type="text/javascript">
                    function changeShift(color){
                        //First we make both visible, everytime this function is called.
                        document.getElementById("acceptBox").style.display='none';
                        document.getElementById("tradeBox").style.display='none';
                        
                        //Then we match the color to its proper action.
                        if (color == "orange") {    //The user has already sent a trade request.
                            alert("Ett passbyte har redan skickats");
                        }
                        else if (color == "blue") { //The user has recieved a trade request.
                            document.getElementById("acceptBox").style.display='block';
                        }
                        else if (color == "white") {    //The employee does not work on this shift, so nothing happens.
                        }
                        else {  //The color is green. The employee wants to trade away a shift.
                            document.getElementById("tradeBox").style.display='block';
                        }                
                    }           
                </script>
                
                <!-- Some additional style elements for the particular page -->
                <style>
                
                a {
                    color: #e33b06;
                    text-decoration: none;    
                }

                table {
                    empty-cells: show;
                }

                td {
                    vertical-align: top;
                    padding-bottom: 8px;
                    font-size: small;
                    padding: 10px;
                }

                th {
                    padding-bottom: 10px;
                    padding-right: 10px;
                    font-size:14px;
                    font-weight: normal;
                }
                
                </style>

                <center>

                <!-- This table displays the current week and links to go back or forth a week -->
                <table>
                    <h:form>
                        <h:commandLink value="&lt;&lt;" actionListener="#{schema.setWeek(-1)}"></h:commandLink>
                    </h:form>
                    Vecka: #{schema.week}
                    <h:form>
                        <h:commandLink value="&gt;&gt;" actionListener="#{schema.setWeek(1)}"></h:commandLink>
                    </h:form>
                </table><br/>

                <!-- This is the table that shows the shifts for the current week -->
                <table class="kalender">
                    
                    <!-- This row displays the headlines -->
                    <tr>
                        <th></th>
                        <th>Måndag</th>
                        <th>Tisdag</th>
                        <th>Onsdag</th>
                        <th>Torsdag</th>
                        <th>Fredag</th>
                        <th>Lördag</th>
                        <th>Söndag</th>
                    </tr>
                    
                    <!-- This row displays the lunch shifts for this week -->
                    <tr>
                        <th>Lunch</th>
                        
                        <!-- This represents the lunch shift on Monday -->
                        <td>
                            <!-- When the div is clicked, it calls the function changeShift(color) with the color for this shift -->
                            <!-- This value is obtained from the method color schema.java -->
                            <!-- The same thing goes for every other cell in the grid -->
                            <div onclick="changeShift('#{schema.color(0, 'Lunch', request.remoteUser)}')" style="height:50px;width:50px">
                                <h:form>
                                    <!-- In the div there is also a button -->
                                    <!-- The button is styled so that the background-color represent the status of the shift -->
                                    <!-- It calls the method color in schema.java to find out the color -->
                                    <!-- When a button is clicked, it calls a method to store which of the shifts (cell in the grid) that was most recently clicked -->
                                    <!-- The same thing goes for every other cell in the grid -->
                                    <h:commandButton onclick="" actionListener="#{schema.setDatumInClassDatum(0, 'Lunch')}" style="height:50px;width:50px;background-color: #{schema.color(0, 'Lunch', request.remoteUser)}"/>
                                </h:form>
                            </div>
                        </td>
                        
                        <!-- This represents the lunch shift on Tuesday -->
                        <td>
                            <div onclick="changeShift('#{schema.color(1, 'Lunch', request.remoteUser)}')" style="height:50px;width:50px">
                                <h:form>
                                    <h:commandButton onclick="" actionListener="#{schema.setDatumInClassDatum(1, 'Lunch')}" style="height:50px;width:50px;background-color: #{schema.color(1, 'Lunch', request.remoteUser)}"/>
                                </h:form>
                            </div>
                        </td>
                        
                        <!-- This represents the lunch shift on Wednesday -->
                        <td>
                            <div onclick="changeShift('#{schema.color(2, 'Lunch', request.remoteUser)}')" style="height:50px;width:50px">
                                <h:form>
                                    <h:commandButton onclick="" actionListener="#{schema.setDatumInClassDatum(2, 'Lunch')}" style="height:50px;width:50px;background-color: #{schema.color(2, 'Lunch', request.remoteUser)}"/>
                                </h:form>
                            </div>
                        </td>
                        
                        <!-- This represents the lunch shift on Thursday -->
                        <td>
                            <div onclick="changeShift('#{schema.color(3, 'Lunch', request.remoteUser)}')" style="height:50px;width:50px">
                                <h:form>
                                    <h:commandButton onclick="" actionListener="#{schema.setDatumInClassDatum(3, 'Lunch')}" style="height:50px;width:50px;background-color: #{schema.color(3, 'Lunch', request.remoteUser)}"/>
                                </h:form>
                            </div>
                        </td>
                        
                        <!-- This represents the lunch shift on Friday -->
                        <td>
                            <div onclick="changeShift('#{schema.color(4, 'Lunch', request.remoteUser)}')" style="height:50px;width:50px">
                                <h:form>
                                    <h:commandButton onclick="" actionListener="#{schema.setDatumInClassDatum(4, 'Lunch')}" style="height:50px;width:50px;background-color: #{schema.color(4, 'Lunch', request.remoteUser)}"/>
                                </h:form>
                            </div>
                        </td>
                        
                        <!-- This represents the lunch shift on Saturday -->
                        <td>
                            <div onclick="changeShift('#{schema.color(5, 'Lunch', request.remoteUser)}')" style="height:50px;width:50px">
                                <h:form>
                                    <h:commandButton onclick="" actionListener="#{schema.setDatumInClassDatum(5, 'Lunch')}" style="height:50px;width:50px;background-color: #{schema.color(5, 'Lunch', request.remoteUser)}"/>
                                </h:form>
                            </div>
                        </td>
                        
                        <!-- This represents the lunch shift on Saturday -->
                        <td>
                            <div onclick="changeShift('#{schema.color(6, 'Lunch', request.remoteUser)}')" style="height:50px;width:50px">
                                <h:form>
                                    <h:commandButton onclick="" actionListener="#{schema.setDatumInClassDatum(6, 'Lunch')}" style="height:50px;width:50px;background-color: #{schema.color(6, 'Lunch', request.remoteUser)}"/>
                                </h:form>
                            </div>
                        </td>
                    </tr>
                    
                    <!-- This row displays the dinner shifts for this week -->
                    <tr>
                        <th>Middag</th>
                        
                        <!-- This represents the dinner shift on Monday -->
                        <td>
                            <div onclick="changeShift('#{schema.color(0, 'Dinner', request.remoteUser)}')" style="height:50px;width:50px">
                                <h:form>
                                    <h:commandButton onclick="" actionListener="#{schema.setDatumInClassDatum(0, 'Dinner')}" style="height:50px;width:50px;background-color: #{schema.color(0, 'Dinner', request.remoteUser)}"/>
                                </h:form>
                            </div>
                        </td>
                        
                        <!-- This represents the dinner shift on Tuesday -->
                        <td>
                            <div onclick="changeShift('#{schema.color(1, 'Dinner', request.remoteUser)}')" style="height:50px;width:50px">
                                <h:form>
                                    <h:commandButton onclick="" actionListener="#{schema.setDatumInClassDatum(1, 'Dinner')}" style="height:50px;width:50px;background-color: #{schema.color(1, 'Dinner', request.remoteUser)}"/>
                                </h:form>
                            </div>
                        </td>
                        
                        <!-- This represents the dinner shift on Wednesday -->
                        <td>
                            <div onclick="changeShift('#{schema.color(2, 'Dinner', request.remoteUser)}')" style="height:50px;width:50px">
                                <h:form>
                                    <h:commandButton onclick="" actionListener="#{schema.setDatumInClassDatum(2, 'Dinner')}" style="height:50px;width:50px;background-color: #{schema.color(2, 'Dinner', request.remoteUser)}"/>
                                </h:form>
                            </div>
                        </td>
                        
                        <!-- This represents the dinner shift on Thursday -->
                        <td>
                            <div onclick="changeShift('#{schema.color(3, 'Dinner', request.remoteUser)}')" style="height:50px;width:50px">
                                <h:form>
                                    <h:commandButton onclick="" actionListener="#{schema.setDatumInClassDatum(3, 'Dinner')}" style="height:50px;width:50px;background-color: #{schema.color(3, 'Dinner', request.remoteUser)}"/>
                                </h:form>
                            </div>
                        </td>
                        
                        <!-- This represents the dinner shift on Friday -->
                        <td>
                            <div onclick="changeShift('#{schema.color(4, 'Dinner', request.remoteUser)}')" style="height:50px;width:50px">
                                <h:form>
                                    <h:commandButton onclick="" actionListener="#{schema.setDatumInClassDatum(4, 'Dinner')}" style="height:50px;width:50px;background-color: #{schema.color(4, 'Dinner', request.remoteUser)}"/>
                                </h:form>
                            </div>
                        </td>
                        
                        <!-- This represents the dinner shift on Saturday -->
                        <td>
                            <div onclick="changeShift('#{schema.color(5, 'Dinner', request.remoteUser)}')" style="height:50px;width:50px">
                                <h:form>
                                    <h:commandButton onclick="" actionListener="#{schema.setDatumInClassDatum(5, 'Dinner')}" style="height:50px;width:50px;background-color: #{schema.color(5, 'Dinner', request.remoteUser)}"/>
                                </h:form>
                            </div>
                        </td>
                        
                        <!-- This represents the dinner shift on Saturday -->
                        <td>
                            <div onclick="changeShift('#{schema.color(6, 'Dinner', request.remoteUser)}')" style="height:50px;width:50px">
                                <h:form>
                                    <h:commandButton onclick="" actionListener="#{schema.setDatumInClassDatum(6, 'Dinner')}" style="height:50px;width:50px;background-color: #{schema.color(6, 'Dinner', request.remoteUser)}"/>
                                </h:form>
                            </div>
                        </td>
                    </tr>
                </table>
                
                <!-- This is the div that is visible when a user wants to trade away a green shift to another employee-->
                <div id="tradeBox">
                    <h3>Skicka bytesförfrågan</h3>
                    Till:
                    <!-- This datatable displays all the possible names of the employees with a button for each one -->
                    <!-- The collection it iterates through is the ArrayList employees from schema.java -->
                    <!-- The current employee is stored in the variable "item" -->
                    <h:dataTable value="#{schema.displayEmployees(request.remoteUser)}" var="item">
                        <h:column>
                            <h:form>
                                <!-- When a button is clicked, it calls the method with these variables -->
                                <!-- datum.date and datum.type is updated when a button, from the columns in the grid above, are clicked so it gets the current values -->
                                <!-- request.remoteUser is the name of the user logged in -->
                                <!-- item is the name of the employee that is in textfield of the button -->
                                <h:commandButton actionListener="#{schema.sendMailAndUpdateDB(datum.date, request.remoteUser, item, datum.type)}" value="#{item}" onclick=""/>
                            </h:form>
                        </h:column>
                    </h:dataTable>
                </div>

                <!-- This is the div that is visible when a user has clicked a blue shifts and wants to decides whether or not to accept or decline it -->
                <div id="acceptBox">
                    <h3>Acceptera bytet?</h3>
                        <h:form>
                            <!-- There are two choices: Yes and No. -->
                            <!-- When a button is clicked, it calls one of the method with these variables -->
                            <!-- datum.date and datum.type is updated when a button, from the columns in the grid above, are clicked so it gets the current values -->
                            <!-- request.remoteUser is the name of the user logged in -->
                            <h:commandButton actionListener="#{schema.acceptChangeShift(datum.date, request.remoteUser, datum.type)}" value="Ja" onclick=""/>
                            <h:commandButton actionListener="#{schema.declineChangeShift(datum.date, request.remoteUser, datum.type)}" value="Nej" onclick=""/>
                        </h:form>
                </div>

                <br/>
                
                <!-- This div displays all the ongoing shift trades -->
                <div id="displayMessagesBox">
                    <h4>Aktuella passbyten</h4>
                    <!-- This datatable displays all the rows of the ArrayList messages from schema.java -->
                    <!-- The current row is stored in the variable "item" -->
                    <h:dataTable value="#{schema.displayMessages()}" var="item">
                        <h:column>
                            <!-- Print out the current row -->
                            <h:outputText value="#{item}"/>
                        </h:column>                
                    </h:dataTable>
                </div>            

                </center> 
            </ui:define>
        </ui:composition>
    </body>
</html>
